<!-- 图片背景展示需要设置、图片宽高联动需要完善 标题的背景图片要修改为点击弹窗进行选择 -->
<template>
  <div>
    <header class="flex items-center justify-between mb-[16px]  border-t border-gray-200 pt-[20px]">
      <div class="mb-[8px] text-[14px] text-[#333] font-medium">{{ $t("competition.modules.titleModule.moduleSettings")
      }}</div>
      <el-button :icon="Trash2" link @click="handleDelete"></el-button>
    </header>
    <el-form>
      <div class="mb-[16px] border-b-[1px] border-[#E5E5E5]">
        <el-form-item :label="$t('competition.modules.titleModule.backgroundType')">
          <el-radio-group v-model="model.bgType">
            <el-radio value="color">{{ $t('competition.modules.titleModule.colorFill') }}</el-radio>
            <el-radio value="image">{{ $t('competition.modules.titleModule.imageFill') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="model.bgType === 'color'" :label="$t('competition.modules.titleModule.backgroundColor')">
          <el-color-picker :style="`background-color: ${model.bgColor || '#000000'};`" v-model="model.bgColor" />
        </el-form-item>
        <div v-else>
          <el-form-item :label="$t('competition.modules.titleModule.backgroundImage')">
            <ImageListUpload
              :stemImages="model.bgImageInfo.imgUrl ? [{ id: 'bannerUrl', path: model.bgImageInfo.imgUrl }] : []"
              actionImgStyle="width: 250px;height: 112px;" :imgNumber="1" :limit-size-img="5"
              @update:stemImages="(v) => { model.bgImageInfo.imgUrl = v[0]?.path || '' }" />
            <div class="text-[#AEAEAE] text-[12px] leading-[20px]">支持png、jpeg、jpg格式，大小不超过5M</div>
          </el-form-item>
        </div>
      </div>
      <el-form-item :label="$t('competition.modules.titleModule.titleBackground')">
        <ImageListUpload
          :stemImages="model.titleInfo.titleUrl ? [{ id: 'decorImage', path: model.titleInfo.titleUrl }] : []"
          actionImgStyle="width: 252px;height: 114px;" :imgNumber="1" :limit-size-img="5"
          @update:stemImages="(v) => { model.titleInfo.titleUrl = v[0]?.path || '' }">
            <!-- 可自定义上传提示信息 -->
            <template #upload-info>
              <ImageUp class="text-xl mb-1 w-4 h-4" />
              <div class="text-xs" style="color: rgba(174, 174, 174, 1)">{{ $t('选择标题背景') }}</div>
            </template>
            </ImageListUpload>
        <div class="text-[#AEAEAE] text-[12px] leading-[20px]">支持png、jpeg、jpg格式，大小不超过 5 M。</div>
      </el-form-item>
      <el-form-item>
        <template #label>
          <div class="relative">
            <span class="mr-2 text-red-500 absolute left-[-7px]">*</span>
            {{ $t('competition.modules.titleModule.titleText') }}
          </div>
        </template>
        <el-input v-model="model.titleInfo.title" :placeholder="$t('common.inputPhTxt')" />
      </el-form-item>
      <el-form-item :label="$t('competition.modules.titleModule.textSettings')">
        <SetTextFormat v-model:modelValue="model.titleInfo.textStyle" />
      </el-form-item>
      <el-form-item :label="$t('competition.modules.titleModule.introText')">
        <el-input type="textarea" v-model="model.descInfo.desc" :rows="5" :placeholder="$t('common.inputPhTxt')" />
      </el-form-item>
      <el-form-item :label="$t('competition.modules.titleModule.textSettings')">
        <SetTextFormat v-model:modelValue="model.descInfo.textStyle" />
      </el-form-item>
    </el-form>
    <!-- 图片选择弹窗 -->
    <TitleImageSelector v-model:visible="showImageSelector" :current-image="model.titleInfo.titleUrl"
      @confirm="handleImageSelect" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Trash2, ImageUp } from '@vben/icons'
import { $t } from '#/locales'
import ImageListUpload from "#/components/common/image-list-upload.vue"
import SetTextFormat from '#/components/setTextFormat.vue'
import TitleImageSelector from './title-image-selector.vue'
import { getPreviewImageUrl } from './imagePreview'

// 文本格式配置接口
interface TextFormatConfig {
  fontSize: number;
  fontColor: string;
  fontBold: boolean;
  italic: boolean;
  underline: boolean;
  alignCenter: string;
  textWidth: number;
  textHeight: number;
}

export interface TitleState {
  bgType: 'color' | 'image'
  bgColor: string
  bgImageInfo: { w: number; h: number; imgUrl: string }
  titleInfo: { title: string; titleUrl: string; textStyle: TextFormatConfig }
  descInfo: { desc: string; textStyle: TextFormatConfig }
}

const model = defineModel<TitleState>({ required: true })

const emit = defineEmits<{
  delete: []
}>()

// 图片选择相关状态
const showImageSelector = ref(false)
const previewImageUrl = ref<string>('')

// 处理图片选择
const handleImageSelect = (imageUrl: string) => {
  model.value.titleInfo.titleUrl = imageUrl
  showImageSelector.value = false
}

// 处理删除
const handleDelete = () => {
  emit('delete')
}

// 监听标题背景图片变化，自动加载预览
watch(() => model.value.titleInfo.titleUrl, async (newUrl) => {
  if (newUrl) {
    try {
      previewImageUrl.value = await getPreviewImageUrl(newUrl)
    } catch (error) {
      previewImageUrl.value = ''
    }
  } else {
    previewImageUrl.value = ''
  }
}, { immediate: true })
</script>
